<template>
    <div id="template">
        <el-row class="head">
            <el-col :span="24">
                <h1 class="contract_title">模板管理</h1>
                <span>/ 对合同的模板进行管理</span>
            </el-col>
        </el-row>
        <div class="nav">
            <div class="nav-item">
            <el-button @click="addNew">新增模板</el-button>
            </div>
        </div>
        <el-table class="content" :data="templates" :border="true" v-loading="loading_table">
          <el-table-column label="名称" prop="templateName"></el-table-column>
          <el-table-column label="操作">
              <template slot-scope="s">
                    <el-button type="warning" size="small"  icon="el-icon-edit" circle @click="edit(s.row)"></el-button>
                    <el-button type="danger" size="small"  icon="el-icon-delete" circle @click="deleteTem(s.row)"></el-button>
              </template>
          </el-table-column>
        </el-table>
        <!-- 模板编辑 -->
        <el-dialog title="模板编辑" :visible.sync="templateEditDialogVisible" width="60%" destroy-on-close top="3vh">
            <template-view ref="refTemplateEdit" :template="template"></template-view>
        </el-dialog>
    </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
export default {
    name:"contract_template",
    components:{
        'template-view': resolve => require(["./template_view"],resolve),				// 合同列表组件标签
    },
    data(){
        return{
            templates:[],
            template:{},
            templateEditDialogVisible:false,
            loading_table:true
        }
    },
    methods:{
        addNew(){
            this.template = {}
            this.templateEditDialogVisible = true
            this.$nextTick(function(){
                this.$refs.refTemplateEdit._parent = this
            })
        },
        deleteTem(row){
            this.global.confirm("提示！", "确认删除",()=>{
                this.axios.delete("api/dd/printTemplate/"+row.templateId)
                .then(res => {
                    this.global.mes_success("删除成功")
                    // 刷新
                    this.initData()
                 })
                .catch(err => {
                    this.global.mes_error("删除失败！")
                })
            }, ()=>{
                this.global.mes_message("取消删除")
            })
        },
        edit(s){
            this.template = this.global.copy_obj(s)
            this.templateEditDialogVisible = true
            this.$nextTick(function(){
                this.$refs.refTemplateEdit._parent = this
            })
        },
        
        initData(){
            this.axios.get("api/dd/printTemplates")
            .then(res => {
                this.loading_table = false
                this.templates = res.data
            })
            .catch(err => {
                console.error(err); 
            })
        }
    },
    created(){
        this.initData()
    }

}
</script>

<style scoped>
/* 头部样式 */
#template {
  background: #e4e7ee;
}
.head {
  height: 70px;
  background: #f8f6f8;
  line-height: 70px;
}
.contract_title {
  display: inline-block;
  font-weight: unset;
  margin-left: 20px;
}
.el-col span {
  color: #b4b4bc;
}
.nav {
  margin: 20px;
  background: #fcfbfd;
  width: 100%-40px;
  height: auto;
  min-height: 55px !important;
  line-height: 55px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.nav .nav-item {
  display: inline-block;
  height: 45px;
  padding: 0px 15px;
  line-height: 45px;
}
.el-button--text {
  color: #606266;
  font-size: 14px;
}
.el-dropdown-link {
  color: #606266 !important;
}
.content {
  margin: 20px;
  min-height: 500px;
  background: #fcfbfd;
  width: 100%-40px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>